<template>
    <div class="cc-main">
        <h1>MAIN</h1>
        <button @click="age++">更新年龄：{{ age }}</button>
    </div>
</template>

<script setup lang="ts">
import { onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, ref } from 'vue';

const age = ref(20)

//生命周期-创建阶段
console.log('CcMain.setup - create...')


//生命周期-挂载阶段
onBeforeMount(()=>{
    console.log('CcMaint.onBeforeMount...')
})
onMounted(()=>{
    console.log('CcMaint.onMounted...')
    //此处适合发起服务器API请求
})
//生命周期-更新阶段
onBeforeUpdate(()=>{
    console.log('CcMaint.onBeforeUpdate...')
})
onUpdated(()=>{
    console.log('CcMaint.onUpdated...')
})
//生命周期-卸载阶段
onBeforeUnmount(()=>{
    console.log('CcMaint.onBeforeUnmount...')
})
onUnmounted(()=>{
    console.log('CcMaint.onUnmounted...')
})
</script>

<style scoped>

</style>